<template>
  <div class="add-container">
    <el-button type="text" size="small" @click="editOpenDialogHandler">编辑</el-button>
    <el-dialog :visible.sync="dialog" :title="title" width="600px" :before-close="cancel" :append-to-body="true">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="136px">
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" style="width: 370px;" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="员工姓名" prop="name">
          <el-input v-model="form.name" style="width: 370px;" placeholder="请输入员工姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" style="width: 370px;" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <template>
            <el-radio v-model="form.sex" label="1">男</el-radio>
            <el-radio v-model="form.sex" label="2">女</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="form.idNumber" style="width: 370px;" placeholder="请输入身份证号"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end;">
        <div>
          <el-button type="text" @click="cancel">取消</el-button>
          <el-button @click="submitHandler" style="margin-left: 10px !important;" :loading="loading" type="primary"
            >确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { editEmployee } from '@/api/user'

export default {
  props: {
    selectedData: {
      type: Object,
      required: true
    },
    sup_this: {
      type: Object,
      required: true
    },
  },
  data() {
    let validateIdNumberFormat = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入身份证号'));
      }

      let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      let _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
      // 校验身份证：
      if(_IDRe18.test(value) || _IDre15.test(value)) {
        callback()
      } else {
        callback(new Error('身份证格式不正确'))
      }
    }

    return {
      loading: false,
      dialog: false,
      title: '编辑员工',
      form: {
        username: '',
        name: '',
        phone: '',
        sex: '',
        idNumber: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur'},
          { pattern: /^1[0-9]{10}$/, message: "请输入有效的手机号", trigger: "blur" }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'blur'}
        ],
        idNumber: [
          { required: true, message: '请输入身份证号', trigger: 'blur'},
          { required: true, trigger: 'blur', validator: validateIdNumberFormat }
        ]
      },
    }
  },
  methods: {
    editOpenDialogHandler() {
      this.dialog = true

      this.form = {
        username: this.selectedData.username,
        name: this.selectedData.name,
        phone: this.selectedData.phone,
        sex: this.selectedData.sex,
        idNumber: this.selectedData.idNumber,
        id: this.selectedData.id
      }
    },
    cancel() {
      this.resetForm()
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()

      this.form = {
        username: '',
        name: '',
        phone: '',
        sex: '',
        idNumber: '',
      }
    },
    submitHandler(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true

          editEmployee(this.form).then(res => {
            if (res.data) {
              this.resetForm()

              this.$notify({
                title: '编辑',
                message: '编辑成功',
                type: 'success',
                duration: 2500
              })

              this.loading = false

              this.sup_this.getEmployeeList()
            } else {
              this.$notify({
                title: '编辑',
                message: err.msg,
                type: 'error',
                duration: 2500
              })
            }
          }).catch(err => {
            this.loading = false
            // 错误的处理
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.add-container {
  display: inline-block;
  margin-right: 5px;
}
</style>
